<template>
  <div class="main">
<!-- 别使用viewer组件 回合lazyload冲突！-->
    <div class="image" v-viewer>
      <img  v-lazy=notice.imageUrl alt="图片加载失败……" title="点击图片放大预览" v-if="notice.imageUrl">
      <img src="../assets/image/empty.png" alt="默认图片" title="默认图片" v-else>
    </div>
    <div class="content">
      <h3 class="title">{{ notice.Title }}</h3>
      <p class="info">{{ notice.Content }}</p>
      <p class="contactNumber" style="color: red">联系方式: {{ notice.contactNumber }}</p>
      <p class="time" style="color: #888888">{{ notice.Time }}</p>
    </div>
  </div>
</template>

<script>
export default {
  name: 'SingleNotice',
  props:{
    notice:{
      type: Object,
      default: null
    }
  }
}
</script>

<style scoped>
.main{
  width: 100%;
  height: 100%;
  padding: 5px;
}
.image{
  cursor: pointer;
  width: 100%;
  height: 250px;
  text-align: center;
}
img{
  max-height:250px;
  max-width: 250px;
  vertical-align:middle;
}
.content{
  margin-left: 0.5rem;
  font-size: 0.8rem;
}
@media (max-width: 600px) {
  .main{
    display: flex;
  }
  .image{
    width: 100px;
    height: 100px;
    align-items: center;
  }
  img{
    max-height:100px;
    max-width: 100px;
    vertical-align:middle;
  }
}
</style>
